import BreadCrumbs from "./../../components/BreadCrumbs";
import Table from "./comps/Table/Table";
import "./style.scss";
import REST from "@module/Rest";
import Uts from "@module/Uts";
import usePartState from "@module/usePartState";
import ToastUtils from '@page/common/utils/ToastUtils'
import ZenUI from '@root/components/ZenUI/ZenUI'
import ic_bidfinish from '@root/P/images/ic_bidfinish.png'
import ic_inbid from '@root/P/images/ic_inbid.png'
import  showLoginModal from '@root/P/pages/LoginModal/showLoginModal'


export default function BidDetail(props) {

    const [stateObj, updateState] = usePartState({
        info:{}
    });
    const {info}=stateObj
    const {isLogin,isSupp,unit,deptName,items,status,sn,endDate,classification}=info
    
    React.useEffect(() => {
        getProcurementInfo()
    }, []);
    
    function getProcurementInfo() {
        let url=`/bid/anonymous/order/item/getProcurementInfo`;
        let data=$state.params||{}
        let params= {
            id:data.id||0
        }

        let config={
            'SHOP-AUTHORIZATION':Uts.getCookie('loginToken')
        }
        ToastUtils.loading()
        REST.post(url,params,'',config)
            .then(res=>{
                console.log(res)
                ToastUtils.hide()
                if(res.resultCode=='3000'){
                    ZenUI.ST(res.msg,2)
                }
                if(res.resultCode='0000'){
                    updateState({
                        info:res
                    })
                }
            })
            .catch(err=>{
                ToastUtils.hide()
                console.log(err)
            })
    }

    // 服务
    // <%}else if(classification==5){%>
    // 设备
    // <%}else if(classification==6){%>
    // 其他
    // <%}else if(classification==51){%>
    // 化学试剂
    // <%}else if(classification==56){%>
    // 实验动物
    // <%}else if(classification==113){%>
    // 科研服务
    // <%}else if(classification==518){%>
    // 生物试剂
    // <%}else if(classification==632){%>
    // 元器件
    // <%}else if(classification==667){%>
    // 农资类
    // <%}else if(classification==700){%>
    // 仪器设备
    // <%}else if(classification==701){%>
    // 办公用品
    // <%}else if(classification==751){%>
    // 临床
    // <%}%>

    function getCati(classification) {
        switch (classification) {
            case 1:
                return '试剂';
            case 2:
                return '耗材';
            case 3:
                return '动物';
            case 4:
                return '服务';
            case 5:
                return '设备';
            case 6:
                return '其他';
            case 51:
                return '化学试剂';
            case 56:
                return '实验动物';
            case 113:
                return '科研服务';
            case 518:
                return '生物试剂';
            case 632:
                return '元器件';
            case 667:
                return '农资类';
            case 700:
                return '仪器设备';
            case 701:
                return '办公用品';
            case 751:
                return '临床';
            default:
                return '其他';
        }
    }

    const statusText={
        '4':'竞价中',
        '8':'已取消',
        '100':'已结束'
    }


    return (
        <div className="zen_flex rj_bidlist-wp">
            <div className="zen_w-1200">
                <BreadCrumbs tittleList={[{ name: "在线竞价",canClick:true,path:'/bidList' }, { name:statusText[status]||'' },{name:unit||''},{name:'竞价详情 '}]} />
                <div className={'zen_m-t-30 bid-detail-unit-wrapper'}>
                    <p className={'bid-detail-unit'}>{unit}</p>
                </div>
                <div className={'bid-detail-title-row'}>
                    {renderCatify(unit)}

                    <p className={'bid-detail-no'}>竞价编号：{sn}</p>
                    <p className={'bid-detail-time'}>结束时间：{endDate}</p>
                </div>
                {
                    info&&info.unit?
                     <TopHeader
                        info={info}
                    />
                    :
                    <div className={'zen_h-100'}>

                    </div>
                }
                {
                    renderCenter()
                }

            </div>
        </div>
    );

    function renderCatify(unit){
        if(unit=='中山大学'){
            if(status==100){
               return (<p className={'bid-detail-cati'}>竞价类型：{getCati(classification)}</p>)
            }
            else{
                return  null;
            }
        }
        else{
            return(
                <p className={'bid-detail-cati'}>竞价类型：{getCati(classification)}</p>
            )
        }

    }

    function renderCenter(){
        if(info&&!info.unit){
            return  null
        }
        return  (
            <Table
                info={info}
            />
        )
    };
}


function TopHeader(props) {
    const [stateObj, updateState] = usePartState({
        day:'00',
        hour:'00',
        minute:'00',
        second:'00',
        isEnd:false, //对应正在竞价中的商品，倒计时时间已到，变成竞价结束的商品
    });

    const {day,hour,minute,second,isEnd}=stateObj;
    const {isLogin,isSupp,unit,deptName,userName,items,status,sn,endDate,classification}=props.info

    const statusText={
        '4':'竞价中',
        '8':'已取消',
        '100':'已结束'
    }

    let timerId=null;


    React.useEffect(() => {
        timerId=setInterval(()=>{
            showCountDown()
        },1000)
        return function() {
            clearInterval(timerId)
        };
    }, []);



    function showCountDown() {
        const {endDate}=props.info

        if(!endDate){
            return  null;
        }
        var a = endDate.split("-");
        var b = a[2].split(" ");
        var c = b[1].split(":");
        var y = parseInt(a[0]),
            m = parseInt(a[1]),
            d = parseInt(b[0]),
            h = parseInt(c[0]),
            i = parseInt(c[1]),
            s = parseInt(c[2]);
        const now = new Date();
        const endDate2 = new Date(y, m - 1, d, h, i, s + 15);
        const leftTime = endDate2.getTime() - now.getTime();
        const leftsecond = parseInt(leftTime / 1000);
        //天
        let day1 = Math.floor(leftsecond / (60 * 60 * 24));
        //时
        let hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
        //分
        let minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60);
        //秒
        let second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60);
        day1 = day1 < 10 ? '0' + day1 : day1;
        hour = hour < 10 ? '0' + hour : hour;
        minute = minute < 10 ? '0' + minute : minute;
        second = second < 10 ? '0' + second : second;

        // console.log(day1,hour,minute,second)
        if(day1 == "0-1"){
            updateState({
                isEnd:true
            })
            clearInterval(timerId);
        }
        if((day1 == "00" && hour == "00" && minute == "00" && second == "01")){
            // window.location.reload(true);
            updateState({
                isEnd:true
            })
            clearInterval(timerId);

        }else{
            updateState({
                day:day1,
                hour,
                minute,
                second
            })
        }
    }

    if(isEnd){
        return  endTopHeader()
    }
    if(status==4){
        return(
            <div className={'bid-detail-top-header'}>
                <img src={ic_inbid} alt="" className={'zen_m-l-30'} />
                <p className={Uts.sc(['zen_fs-24 zen_m-r-32', status==4? 'zen_0093EB':'' ]) }>{statusText[status]}</p>
                <div className={'bid-detail-top-right'}>
                    <p>距结束时间：<span className={'zen_0093EB'}>{day}</span> 天 <span className={'zen_0093EB'}>{hour}</span>小时 <span className={'zen_0093EB'}>{minute}</span> 分 <span className={'zen_0093EB'}>{second}</span> 秒</p>
                    {
                        unit!='中山大学'&& <p>需求发布人：{deptName} <span className={'zen_m-l-10'}>{userName}</span></p>
                    }
                </div>
                {
                    !isLogin&&<ToLogin/>
                }

            </div>
        )
    }
    if(status==8){
        return(
            <div className={'bid-detail-top-header  bid-detail-top-bg'}>
                <img src={ic_bidfinish} alt="" className={'zen_m-l-30'} />
                <p className={'zen_fs-24 zen_m-r-32'}>{statusText[status]}</p>
                <div className={'bid-detail-top-right1'}>
                    <p>距结束时间：<span>00</span> 天 <span >00</span>小时 <span >00</span> 分 <span >00</span> 秒</p>
                </div>
            </div>
        )
    }
    return endTopHeader();



    function endTopHeader() {
        return(
            <div className={'bid-detail-top-header  bid-detail-top-bg'}>
                <img src={ic_bidfinish} alt="" className={'zen_m-l-30'} />
                <p className={'zen_fs-24 zen_m-r-32'}>{statusText[status]}</p>
                <div className={'bid-detail-top-right1'}>
                    <p>距结束时间：<span>00</span> 天 <span >00</span>小时 <span >00</span> 分 <span >00</span> 秒</p>
                    {
                        unit!='中山大学'&& <p>需求发布人：{deptName} <span className={'zen_m-l-10'}>{userName}</span></p>
                    }
                </div>
                {
                    !isLogin&&<ToLogin/>
                }
            </div>
        )
    }

}






function ToLogin(props) {
    return(
        <div className={'bid-detail-tologin'}>
            <p className={'bid-detail-tologin-p1'}>报价请登录</p>
            <div
                onClick={()=>{
                    showLoginModal('',true)
                }}
                className={'bid-detail-tologin-btn'}>
                <p>登录</p>
            </div>
        </div>
    )
}